<template>
	<view>
		<view class="mian">
			<view class="box_m">
				<view class="box_heard">
					<text class="box_heard_txt">下午2:20</text>
				</view>
				<view @tap="goRead(item.id)" class="box_content" v-for="item in  noticeData" :key="item.id">
					<view class="content_t">
						<text class="">通知</text>
						<text class="" v-text="item.status=='1' ? '已读取' :'未读取'"></text>
					</view>
					<view class="container">
						<text v-text="item.flag=='y' ? '交易成功' :'交易失败'" :style="{'color': item.status-0 ? 'background' :''}"></text>
					</view>
					<view class="des text-center">
							{{item.content.name}}
					</view>
					<view  style="margin-left: 40rpx;color: #888888;"><text>{{item.createTime}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users")
	export default {
		data() {
			return {
				// newdata: [{
				// 		"id": 5,
				// 		"userId": 4,
				// 		"content": "{\"codeId\":\"asdf\",\"fixedAmount\":0,\"fixedDay\":0,\"fixedType\":\"基金定投\",\"id\":4,\"name\":\"老王基金\",\"productType\":\"基金\",\"userId\":4}",
				// 		"status": "0",
				// 		"flag": "n",
				// 		"createTime": "2021-04-27 17:12:36"
				// 	},
				// 	{
				// 		"id": 4,
				// 		"userId": 4,
				// 		"content": "{\"codeId\":\"asdf\",\"fixedAmount\":0,\"fixedDay\":0,\"fixedType\":\"基金定投\",\"id\":4,\"name\":\"养老基金\",\"productType\":\"基金\",\"userId\":4}",
				// 		"status": "1",
				// 		"flag": "y",
				// 		"createTime": "2021-04-27 17:00:43"
				// 	}
				// ]
			}
		},
		onLoad() {
			// console.log(this.notice,'123')
		},
		computed:{
			...mapState(['noticeData']),
			// notice(){
			// 	 this.noticeData.forEach(item=>{
			// 		item.content=JSON.parse(item.content)
			// 	})
			// 	return this.noticeData
			// }
		},
		methods: {
			...mapActions(['updateNotice']),
			//查看详情并修改状态
			goRead(id){
				// 此处应该跳转通知详情
				console.log(id)
				this.updateNotice({
					id
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.mian {
		width: 670rpx;
		margin: 20rpx auto;

		.box_m {

			border-radius: 20rpx;
			
			.box_heard {

				text-align: center;

				.box_heard_txt {
					background-color: rgba(136, 136, 136, .1);
					border-radius: 20rpx;
					padding: 5rpx 20rpx;
					font-size: 20rpx;
					// box-shadow: 1px 1px 1px 1px #8A8A8A;
				}
			}

			.box_content {
			background-color: white;
				height: 300rpx;
				border-radius: 15rpx;
				margin-top: 30rpx;
				// box-shadow: 1px 1px 1px 1px #8A8A8A;
				.content_t {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 20rpx 40rpx;
				}

				.container {
					font-size: 60rpx;
					color: #8A8A8A;
					text-align: center;
				}

				.des {
					box-sizing: border-box;
					padding: 20rpx 40rpx;
					overflow: hidden;
					font-size: 30rpx;
					text-overflow: ellipsis;

					display: -webkit-box;

					-webkit-box-orient: vertical;

					-webkit-line-clamp: 2;
					height: 100rpx;
				}
			}

		}
	}
</style>
